<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>酒店评论</title>
  <link href="https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet">
  <!-- <link href="https://cdn.jsdelivr.net/npm/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet"> -->
  <link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">
  <link href="./css/layout.css" rel="stylesheet">
  <script src="./js/custom-elem.js"></script>
  <script src="js/jquery-3.6.0.min.js"></script>
  <script src="js/vue.js"></script>
  <script src="js/axios-0.18.0.js"></script>
  <script src="//unpkg.com/vue@2/dist/vue.js"></script>
  <script src="//unpkg.com/element-ui@2.15.10/lib/index.js"></script>
  <style>
    @import url("//unpkg.com/element-ui@2.15.10/lib/theme-chalk/index.css");
  </style>
</head>
<body>
  <div>
    <div id="app1" style="position:relative;width:300px;height: 30px;top: 180px; left: 180px;">
      <!-- 评分 -->
      <div class="block">
        <span class="demonstration">住宿体验评分</span>
        <el-rate
          v-model="value2"
          :colors="colors">
        </el-rate>
      </div>
      <input type="hidden" :value=value2 class="scoreVal">
    </div>
  </div>
  
  <div id="app">
    <!-- <demo-nav title="wangEditor extend menu"></demo-nav> -->
    <div class="page-container">
      <div class="page-left">
        <demo-menu></demo-menu>
      </div>
      <div class="page-right">
        <!-- 编辑器 DOM -->
        <form action="">
          <div style="border: 1px solid #ccc;margin-right: 150px;margin-top: 180px;" class="new1">
            <div id="editor-toolbar" style="border-bottom: 1px solid #ccc;"></div>
            <div id="editor-text-area" style="height: 500px"></div>
            <!-- v-model="window.editor" -->
          </div>
          <el-button type="primary" @click="test1()">上传<i class="el-icon-upload el-icon--right" >{{text_success}}</i></el-button>
          <a v-if="code_success == 200" :href=Ahref>返回主页</a>
        </form>
      </div>
    </div>
  </div>


  <!-- <script src="https://cdn.jsdelivr.net/npm/@wangeditor/editor@latest/dist/index.min.js"></script> -->
  <script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
  <!-- 酒店评分 -->
  <script>
    var Main = {
    data() {
      return {
        value1: null,
        value2: null,
        colors: ['#99A9BF', '#F7BA2A', '#FF9900']  // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
      }
    },
  }
  var Ctor = Vue.extend(Main)
  new Ctor().$mount('#app1')
  </script>
  <script>
    new Vue({
      el:"#app",
      data() {
        return {
          Ahref:"../index/index.html",
          //评论文本
          text:"",
          //评论图片
          img:[],
          //判断是否上传成功(文本内容)
          text_success:"",
          //判断是否上传成功(状态码)
          code_success:"",
          //用户id
          user_id:1,
          //酒店id
          hotel_id:101,
          //订单id
          order_id:0,
          //用户手机号
          userPhone:null,
        }
      },
      methods: {
        test1(){
          console.log("函数正在执行中...")
          console.log($(".scoreVal").val())
          let count = 1;
          this.text = editor.getText();
          let html = editor.getHtml();
          //将获取的html转换为string并截取出评论的文本内容
          let str = String(html);
          //正则表达式取出img图片
          var imgReg = /<img.*?(?:>|\/>)/gi;
          let strNew = str.match(imgReg)
          str = String(strNew).split(",")
          //对图片对象进行清空操作
          this.img = []
          for(let i = 0;i<str.length;i=i+2){
            let imgStr = str[i]+","+str[i+1]
            // 图片路径
            strNew = imgStr.split("\"")[1]
            this.img.push(strNew)
          }
          console.log(this.img)
          //发送ajax请求
          var that = this
          //获取评分
          let score = $(".scoreVal").val()
          axios({
            method:"post",
            url:"http://localhost:8080/getComment",
            data:{
              "text":this.text,
              "images":this.img,
              "userId":this.user_id,
              "hotelId":this.hotel_id,
              "orderId":this.order_id,
              "score":score
            },
          }).then(function(resp){
              that.text_success = resp.data.msg
              that.code_success = resp.data.code
          })
          
        }
      },
      mounted() {
               // 取出缓存中的用户数据
               var url = decodeURI(window.location.href);
               console.log("路径" + url)
               var str1 = url.split("?userId=")[1]
               var userId = str1.split("-")[0]
               var hotelId = str1.split("-")[1]
               var orderId = str1.split("-")[2]
               var phone = str1.split("-")[3]
               console.log(userId)
               console.log(hotelId)
               console.log(orderId)
               this.userPhone = phone
               this.user_id = userId
               this.hotel_id = hotelId
               this.order_id = orderId
               console.log(this.user_id+this.hotel_id+this.order_id)
               this.Ahref += "?phone="+this.userPhone
            }   
   })
  </script>
  <script>
    //============================
    const E = window.wangEditor

    const LANG = location.href.indexOf('lang=en') > 0 ? 'en' : 'zh-CN'
    E.i18nChangeLanguage(LANG) // 切换语言



    // Extend menu
    class MyMenu {
      constructor() {
        this.title = 'My menu'
        // this.iconSvg = '<svg >...</svg>'
        this.tag = 'button'
      }
      getValue(editor) {
        return ' hello '
      }
      isActive(editor) {
        return false // or true
      }
      isDisabled(editor) {
        return false // or true
      }
      exec(editor, value) {
        editor.insertText(value) // value 即 this.getValue(editor) 的返回值
      }
    }
    const myMenuConf = {
      key: 'myMenu',
      factory() {
        return new MyMenu()
      }
    }
    E.Boot.registerMenu(myMenuConf)



    window.editor = E.createEditor({
      selector: '#editor-text-area',
      html: '<p><br></p>',
      config: {
        placeholder: 'Type here...',
        MENU_CONF: {
          uploadImage: {
            fieldName: 'your-fileName',
            base64LimitSize: 10 * 1024 * 1024 // 10M 以下插入 base64
          }
        },
        onChange(editor) {
          // console.log(editor.getHtml())
          // 选中文字
          const selectionText = editor.getSelectionText()
          document.getElementById('selected-length').innerHTML = selectionText.length
          // 全部文字
          const text = editor.getText().replace(/\n|\r/mg, '')
          document.getElementById('total-length').innerHTML = text.length
        }
      }
    })

    window.toolbar = E.createToolbar({
      editor,
      selector: '#editor-toolbar',
      config: {
        insertKeys: {
          index: 0,
          keys: ['myMenu'], // show menu in toolbar
        }
      }
    })
  </script>
</body>

</html>